<template>
  <div id="videoAndPdf">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      style="background-color: white"
    >
      <el-tab-pane label="内容" name="first">
        <object
          :data="this.$data.pointO[0].contentAddress"
          type="application/pdf"
          style="width: 100%;height: 90vmin"
        ></object>
      </el-tab-pane>

      <el-tab-pane label="评论" name="fourth">
        <Comment style="width: 100%;height: 90vmin" />
      </el-tab-pane>

      <el-tab-pane label="其他信息" name="fifth">
        <el-descriptions title="" direction="vertical" :column="4" border>
          <el-descriptions-item label="addressId">{{
            pointO[0].addressId
          }}</el-descriptions-item>
          <el-descriptions-item label="uploader">{{
            pointO[0].uploader
          }}</el-descriptions-item>
          <el-descriptions-item label="uploadTime" :span="2">{{
            pointO[0].uploadTime
          }}</el-descriptions-item>
          <el-descriptions-item label="pointId">{{
            pointO[0].point.pointId
          }}</el-descriptions-item>
          <el-descriptions-item label="creator">{{
            pointO[0].creator
          }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
    <div id="qrCode" ref="qrCodeDiv"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import Player from "xgplayer";
import Comment from "./Comment.vue";

export default {
  components: { Comment },
  name: "videoandpdf",
  data() {
    return {
      qrcode: "无",
      player: null,
      activeName: "first",
      urli: "",
      pointO: [
        {
          uploadTime: "",
          uploader: "",
          addressId: 0,
          creator: "",
          tag: "计算机网络",
          content: "文档",
          contentAddress: "",
          point: {
            pointName: "",
            pointId: "",
          },
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    async getUrl() {
      var value = this.$route.query.value;
      let res = await this.$http.get(
        "http://1.117.249.55//2backcode/address/search",
        {
          params: {
            key: "pointId",
            value: value,
          },
        }
      );
      console.log(res.data);
      this.$data.pointO = res.data;
      if(this.pointO[0].origin=="")
      {
        this.pointO[0].origin="空"
      }
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.pointO[0].origin,
        // text: this.qrcode,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
  },
  watch: {
    "$route.query.value": {
      handler: function() {
        console.log(this.$route.query.value);
        this.getUrl();
      },
    },
  },
  mounted() {
    this.getUrl();
    localStorage.setItem("id", 10000);
  },
};
</script>

<style>
#videoAndPdf {
  height: 90%;
  width: 100%;
}

.mianbaoxie {
  background-color: white;
  padding: 10px;
}

.pdfkk {
  /*display: block;*/
  /*margin-right: auto;*/
  /*margin-left: auto;*/
  width: 100%;
  height: 100% !important;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
